<template>
    <section class="todoapp">
        <!-- header -->
        <header class="header">
            <input
                class="new-todo"
                autocomplete="off"
                placeholder="Todo List"
                @keyup.enter="addTodo"
            >
        </header>
        <!-- main section -->
        <section
            v-show="todos.length"
            class="main"
        >
            <input
                id="toggle-all"
                :checked="allChecked"
                class="toggle-all"
                type="checkbox"
                @change="toggleAll({ done: !allChecked })"
            >
            <label for="toggle-all" />
            <ul class="todo-list">
                <todo
                    v-for="(todo, index) in filteredTodos"
                    :key="index"
                    :todo="todo"
                    @toggleTodo="toggleTodo"
                    @editTodo="editTodo"
                    @deleteTodo="deleteTodo"
                />
            </ul>
        </section>
        <!-- footer -->
        <footer
            v-show="todos.length"
            class="footer"
        >
            <span class="todo-count">
                <strong>{{ remaining }}</strong>
                {{ remaining | pluralize('item') }} left
            </span>
            <ul class="filters">
                <li
                    v-for="(val, key) in filters"
                    :key="key"
                >
                    <a
                        :class="{ selected: visibility === key }"
                        @click.prevent="visibility = key"
                    >{{ key | capitalize }}</a>
                </li>
            </ul>
            <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
        Clear completed
      </button> -->
        </footer>
    </section>
</template>

<script>
import Todo from './Todo.vue'

const STORAGE_KEY = 'todos'
const filters = {
	all: (todos) => todos,
	active: (todos) => todos.filter((todo) => !todo.done),
	completed: (todos) => todos.filter((todo) => todo.done)
}
const defalutList = [
	{ text: 'star this repository', done: false },
	{ text: 'fork this repository', done: false },
	{ text: 'follow author', done: false },
	{ text: 'vue-element-admin', done: true },
	{ text: 'vue', done: true },
	{ text: 'element-ui', done: true },
	{ text: 'axios', done: true },
	{ text: 'webpack', done: true }
]
export default {
	components: { Todo },
	filters: {
		pluralize: (n, w) => (n === 1 ? w : w + 's'),
		capitalize: (s) => s.charAt(0).toUpperCase() + s.slice(1)
	},
	data() {
		return {
			visibility: 'all',
			filters,
			// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
			todos: defalutList
		}
	},
	computed: {
		allChecked() {
			return this.todos.every((todo) => todo.done)
		},
		filteredTodos() {
			return filters[this.visibility](this.todos)
		},
		remaining() {
			return this.todos.filter((todo) => !todo.done).length
		}
	},
	methods: {
		setLocalStorage() {
			window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
		},
		addTodo(e) {
			const text = e.target.value
			if (text.trim()) {
				this.todos.push({
					text,
					done: false
				})
				this.setLocalStorage()
			}
			e.target.value = ''
		},
		toggleTodo(val) {
			val.done = !val.done
			this.setLocalStorage()
		},
		deleteTodo(todo) {
			this.todos.splice(this.todos.indexOf(todo), 1)
			this.setLocalStorage()
		},
		editTodo({ todo, value }) {
			todo.text = value
			this.setLocalStorage()
		},
		clearCompleted() {
			this.todos = this.todos.filter((todo) => !todo.done)
			this.setLocalStorage()
		},
		toggleAll({ done }) {
			this.todos.forEach((todo) => {
				todo.done = done
				this.setLocalStorage()
			})
		}
	}
}
</script>

<style lang="scss">
@import './index.scss';
</style>
